@import '~@angular/material/core/theming/all-theme';
@import "./md-variables.scss";

// NOTE: Theming is currently experimental and not yet publically released!

@include md-core();

//Here the existing theme is being redfined
$primary: md-palette($md-primary);
$accent:  md-palette($md-accent, A200, A100, A400);

$theme: md-light-theme($primary, $accent);

@include angular-material-theme($theme);

// This is where you define your custom them

// md-palette takes, color, default, lighter and darker params
.m2app-dark {
  $dark-primary: md-palette($md-cyan, 700, 500, 900);
  $dark-accent:  md-palette($md-yellow, A200, A100, A400);
  $dark-warn:    md-palette($md-amber, A200, A100, A400);

  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
}


// @import "node_modules/@angular/material/core/theming/_all-theme.scss";
// @import "./md-variables.scss";

// @include md-core();
// // Define a theme.
// $primary: md-palette($md-primary);
// $accent:  md-palette($md-accent);

// $theme: md-light-theme($primary, $accent);

// // Include all theme styles for the components.
// @include angular-material-theme($theme);
.md-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-transform: none;
  width: 1px; 
}
